<!--
 * Description: Flute具体数据列表模块
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/10/12 10:20
-->
<template>
  <div v-loading="isRequesting" class="flute">
    <div class="add">
      <el-button icon="el-icon-plus" plain size="mini" type="primary" @click="handlerAdd">
        {{ $t('button.add') }}
      </el-button>
    </div>
    <el-table
      :cell-class-name="cellClass"
      :data="tableListFilter"
      default-expand-all
      :header-cell-style="headerClass"
      height="calc(100% - 60px)"
      style="width: 100%;"
    >
      <!-- 行号 -->
      <el-table-column align="center" fixed :label="$t('table.NO')" min-width="200px" sortable>
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- Flute -->
      <el-table-column align="center" label="Flute" min-width="400px" prop="flute" sortable />
      <!-- U/P $/m2 -->
      <el-table-column align="center" label="U/P($/m2)" min-width="200px" prop="up" sortable />

      <!--操作列-->
      <el-table-column align="center" fixed="right" :label="$t('table.operate')" min-width="250px">
        <template slot-scope="scope">
          <el-link
            v-if="$hasPer('edit')"
            icon="el-icon-edit"
            style="margin-right:10px"
            @click="rowEdit(scope.$index, scope.row)"
          >
            {{ $t('button.edit') }}
          </el-link>
          <el-link
            v-if="$hasPer('delete')"
            icon="el-icon-delete"
            @click="rowDelete(scope.$index, scope.row)"
          >
            {{ $t('button.delete') }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增 -->
    <BaseDialog
      v-if="addDialogVisible"
      :title="$t('dialog.add')"
      :visible.sync="addDialogVisible"
      width="500px"
    >
      <FluteAdd :configKey="configKey" @cancel="addDialogVisible = false" @save="afterSave" />
    </BaseDialog>
    <!-- 修改 -->
    <BaseDialog
      v-if="editDialogVisible"
      :title="$t('dialog.edit')"
      :visible.sync="editDialogVisible"
      width="500px"
    >
      <FluteEdit :rowData="rowData" @cancel="editDialogVisible = false" @save="afterSave" />
    </BaseDialog>
  </div>
</template>
<script>
import { modelExtraConfigDelete } from '@/api/model/extra-config'
import FluteAdd from './FluteAdd'
import FluteEdit from './FluteEdit'
export default {
  name: 'Flute',
  components: { FluteAdd, FluteEdit },
  props: {
    configKey: {
      type: String,
      default: ''
    },
    tableList: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      isRequesting: false,

      addDialogVisible: false,

      editDialogVisible: false
    }
  },

  computed: {
    tableListFilter() {
      const list = []
      this.tableList.forEach(item => {
        const data = JSON.parse(item.configValue)
        list.push({ id: item.id, configKey: item.configKey, ...data })
      })
      return list
    }
  },

  methods: {
    // 单元格样式
    cellClass() {
      return 'no-border'
    },
    // table 头部样式
    headerClass() {
      return 'background: #e4e4e4 !important;padding:5px 0px;'
    },
    afterSave() {
      this.addDialogVisible = false
      this.editDialogVisible = false
      this.$bus.$emit('cbom-load-detail-list', this.configKey)
    },

    handlerAdd() {
      this.addDialogVisible = true
    },

    rowEdit(index, row) {
      this.editDialogVisible = true
      this.rowData = row
    },

    async rowDelete(index, row) {
      try {
        await this.$confirmBox(this.$t('button.delete'), 'error')
        this.isRequesting = true
        await modelExtraConfigDelete({ id: row.id })
        this.$bus.$emit('cbom-load-detail-list', this.configKey)
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.flute {
  height: 100%;
  background-color: #fff;
}

.add {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
}

/deep/ .el-page-header__content {
  font-size: 16px;
}

/deep/ .no-border {
  border-right: 1px solid transparent !important;
}
</style>
